// import logo from "./logo.svg";
import "./App.css";

import { BrowserRouter, Routes, Route } from "react-router";
import MoveBall from "./components/MoveBall";
import FormTest from "./components/FormComp";
import UseStateTest from "./hooks/useState";
import HocTest from "./HOC";
import Banner from "./components/Banner/Test.js";
import RefTest from "./Ref/RefTest.js";
import ContextTest from "./context/ContextTest.js";
import RenderProps from "./RenderProps/RederPropsTest.js";
import PortalsTest from "./Portals/PortalsTest.js";
import ErrorBoundaryTest from "./ErrorBoundary/ErrorBoundaryTest.js";
import PerformanceOptimization from "./PerformanceOptimization/PerformanceOptimization.js";
function App() {
  return (
    <div className="App">
      <div className="App-header">
        <a href="/ball">小球动画</a>
        <a href="/about">表单组件</a>
        <a href="/hooks">hooks</a>
        <a href="hoc">HOC高阶组件</a>
        <a href="banner">轮播图</a>
        <a href="/ref">Ref引用</a>
        <a href="/context">上下文context</a>
        <a href="/render-props">render-props</a>
        <a href="/portals">PortalsTest</a>
        <a href="errorboundary">错误边界</a>
        <a href="performanceoptimization">性能优化</a>
      </div>
      <BrowserRouter>
        <div className="App-content">
          <Routes>
            <Route
              path="/ball"
              element={
                <MoveBall left={100} top={100} xSpeed={100} ySpeed={100} />
              }
            />
            <Route path="about" element={<FormTest />} />
            <Route path="hooks" element={<UseStateTest />} />
            <Route path="hoc" element={<HocTest />} />
            <Route path="banner" element={<Banner />} />
            <Route path="ref" element={<RefTest />}></Route>
            <Route path="context" element={<ContextTest />}></Route>
            <Route path="render-props" element={<RenderProps />}></Route>
            <Route path="portals" element={<PortalsTest />}></Route>
            {/* <Route path="portals" element={<PortalsTest />}></Route> */}
            <Route path="errorboundary" element={<ErrorBoundaryTest />}></Route>
            <Route
              path="performanceoptimization"
              element={<PerformanceOptimization />}
            ></Route>
          </Routes>
        </div>
      </BrowserRouter>
    </div>
  );
}

export default App;
